<template>
  <div>
    <el-container>
      <el-main>
        <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column width="80" header-align="center" align="center" type="index" label="序号">
          </el-table-column>
          <el-table-column prop="jjDeptName" label="部门名称" header-align="center" align="left" min-width="300">
          </el-table-column>
          <el-table-column prop="fpZt" label="审批状态" header-align="center" align="center" min-width="100">
            <template slot-scope="scope">
              <span :style="'color: '+((scope.row.ffZt=='分配中'||scope.row.ffZt==''||scope.row.ffZt==null)?'#000000':(scope.row.ffZt=='审批中'?'#d97234':'#1e790f'))">{{(scope.row.ffZt==''||scope.row.ffZt==null)?'分配中':scope.row.ffZt}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="jjBh" label="分配编号" header-align="center" align="center" min-width="150">
          </el-table-column>
          <el-table-column prop="fpJj" label="分配奖金" header-align="center" align="right" min-width="100">
          </el-table-column>
          <el-table-column prop="zjJj" label="追加奖金" header-align="center" align="right" min-width="100">
          </el-table-column>
          <el-table-column prop="bmJj" label="奖金总额" header-align="center" align="right" min-width="100">
          </el-table-column>
          <el-table-column prop="ygJj" label="员工分配" header-align="center" align="right" min-width="100">
          </el-table-column>
          <el-table-column prop="dxFp" label="定向分配" header-align="center" align="right" min-width="100">
          </el-table-column>
          <el-table-column prop="jjYe" label="奖金余额" header-align="center" align="right" min-width="100">
          </el-table-column>
<!--          <template slot-scope="scope">-->
<!--            <el-button @click="handleClick(scope.row.jjxXq)" type="text" size="small">奖金项详情</el-button>-->
<!--          </template>-->
        </el-table>
<!--        <el-dialog width="30%" title="奖金项详情" :visible.sync="innerVisible" append-to-body @close='closeDialog'>-->
<!--          <div>-->
<!--            <el-table :data="itemList" style="width: 100%">-->
<!--              <el-table-column prop="jjxName" label="奖金项">-->
<!--              </el-table-column>-->
<!--              <el-table-column prop="jjxDate" label="金额">-->
<!--              </el-table-column>-->
<!--            </el-table>-->
<!--          </div>-->
<!--        </el-dialog>-->
      </el-main>
    </el-container>
  </div>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        innerVisible: false,
        tableData: [],
        itemList: []
      }
    },
    computed: {},
    mounted() {},
    methods: {
      init(obj) {
       //console.log(obj)
        if (obj && obj.length > 0) {
          this.tableData = this.toTree(obj)
        }
      },
      toTree(data) {
        var _this = this;
        var map = {};
        data.forEach(function (item) {
          map[item.id] = item;
        });
        _this.treeData = [];
        data.forEach(function (item) {
          item.hasChildren = true;
          var parent = map[item.pid];
          if (parent) {
            (parent.children || (parent.children = [])).push(item)
          } else {

            _this.treeData.push(item)
          }
        });

        return _this.treeData;
      },
      handleClick(obj) {
        if (obj) {
          this.itemList = [];
          this.itemList = JSON.parse(obj);
          this.innerVisible = true;
        }
      },
      closeDialog() {
        this.itemList = [];
        this.innerVisible = false;
      },

    }
  }

</script>
<style scoped>

</style>
